<!--
 * @Author: underMoonzs 1994186472@qq.com
 * @Date: 2025-10-05 22:26:15
 * @LastEditors: underMoonzs 1994186472@qq.com
 * @LastEditTime: 2025-10-06 21:16:15
 * @FilePath: \environment-map-app\src\components\LeftSideButton.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->


<template>
  <div class="left-side-button">
    <!-- 图层面板 -->
    <div class="layers-panel" :class="{ 'collapsed': !isExpanded }">
      <div class="panel-section">
        <div class="section-header">
          <div class="section-title">图层</div>
        </div>
        <van-checkbox-group v-model="layerChecked" @change="handleLayerChange">
          <van-checkbox v-for="layer in layerData" :key="layer.id" :name="layer.id" type="button" shape="square"
            class="custom-checkbox">
            {{ layer.name }}
          </van-checkbox>
        </van-checkbox-group>

      </div>
      <!-- 自动站部分 -->
      <div class="panel-section">
        <div class="section-header">
          <div class="section-title">自动站</div>
        </div>
        <van-checkbox-group v-model="stationChecked" @change="handleStationChange">
          <van-checkbox v-for="child in autoStation" :key="child.id" :name="child.id" shape="square"
            class="custom-checkbox">
            {{ child.name }}
          </van-checkbox>
        </van-checkbox-group>
      </div>

      <!-- 其他图层部分 -->


      <!-- 清除按钮 -->
      <div class="clear-button">
        <van-button @click="handleClearAllLayers" class="custom-clear-button" size="mini">
          清除
        </van-button>
      </div>
    </div>

    <!-- 展开/收起按钮 -->
    <div class="toggle-button" @click="togglePanel">
      <van-icon :name="isExpanded ? 'arrow' : 'arrow-left'" color="#fff" size="20" />
    </div>
  </div>
</template>
<script setup>

import { ref, inject } from 'vue'
const emitter = inject('emitter')
import layerData from '@/main/layerData'
import { Icon } from 'vant'


// 响应式数据
const stationChecked = ref([])
const layerChecked = ref([])
const activeLayers = ref([])
const currentStationIds = ref([])
const currentLayerIds = ref([])
const isExpanded = ref(true) // 控制展开和收起的状态
const autoStation = ref([
  { name: '国控', id: "guokongzhan" },
  { name: '省控', id: "shengkongzhan" },
  { name: '市控', id: "shikongzhan" },
  { name: '县控', id: "xiankongzhan" }
])


// 站点级别映射
const zidongzhanMap = {
  'guokongzhan': {
    id: "guokongzhan",
    name: "国控",
    layername: "guokong",
    dataType: "dataApi",
    geoType: "Point",
  },
  'shengkongzhan': {
    id: "shengkongzhan",
    name: "省控",
    layername: "shengkong",
    dataType: "dataApi",
    geoType: "Point",
  },
  'shikongzhan': {
    id: "shikongzhan",
    name: "市控",
    layername: "shigong",
    dataType: "dataApi",
    geoType: "Point",
  },
  'xiankongzhan': {
    id: "xiankongzhan",
    name: "县控",
    layername: "xiankong",
    dataType: "dataApi",
    geoType: "Point",
  }
}


// 处理站点选择变化
function handleStationChange(layerIds) {
  currentStationIds.value.filter(id => !layerIds.includes(id)).forEach(
    id => {
      emitter.emit('removeLayer', id)
    })
  layerIds.forEach(layerId => {
    const layerConfig = zidongzhanMap[layerId]
    emitter.emit('addLayer', layerConfig)
  })
  currentStationIds.value = layerIds

}



// 处理图层选择变化
function handleLayerChange(layerIds) {
  currentLayerIds.value.filter(id => !layerIds.includes(id)).forEach(
    id => {
      emitter.emit('removeLayer', id)
    })
  layerIds.forEach(layerId => {
    const layerConfig = layerData.find(layer => layer.id === layerId)
    emitter.emit('addLayer', layerConfig)
  })
  currentLayerIds.value = layerIds
}

// 处理清除所有图层
function handleClearAllLayers() {
  checked.value = []
  activeLayers.value = []
}

// 切换面板展开/收起
function togglePanel() {
  isExpanded.value = !isExpanded.value
}

</script>
<style scoped>
.left-side-button {
  position: fixed;
  right: 10px;
  margin-left: 10px;
  z-index: 100;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  top: 50%; /* 调整此值以精确居中，大概是面板高度的一半 */
  transform: translateY(-50%);
    /* 确保可以正常交互 */
  pointer-events: all;
}


/* 为了更好的视觉效果，可以微调按钮位置 */
.toggle-button {
  background: #1989fa;
  color: white;
  width: 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 10px;
  z-index: 101;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
    /* 适配触摸设备 */
  touch-action: manipulation;
}

/* PC端悬停效果 */
@media (hover: hover) and (pointer: fine) {
  .toggle-button:hover {
    background: #409eff;
    transform: scale(1.1);
  }
}

/* 触摸设备点击效果 */
@media (hover: none) and (pointer: coarse) {
  .toggle-button:active {
    background: #409eff;
    transform: scale(0.95);
  }
}


.layers-panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 10dvw;
  max-width: 35dvw;
  max-height: 80vh;
  overflow-y: auto;
  transition: all 0.3s ease;
  transform-origin: right center;
}


  /* 手机视图下展开状态的切换按钮位置 */
  .layers-panel:not(.collapsed)+.toggle-button {
    transform: translateX(-8px);
  }
  
/* 折叠状态 */
.layers-panel.collapsed {
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  padding: 0;
}
/* PC端样式优化 - 大屏幕显示更宽面板 */
@media screen and (min-width: 1024px) {
  
  /* 面板悬停效果 */
  .layers-panel:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
  }
}


/* 移动端和小程序适配 */
@media screen and (max-width: 767px) {
  
  /* 移动设备上简化过渡效果以提升性能 */
  .layers-panel,
  .toggle-button,
  .left-side-button {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  
  /* 移动设备上增加触摸区域 */
  .toggle-button {
    width: 45rpx;
    height: 90rpx;
  }
}

/* 微信小程序特有样式 - 使用条件编译 */
/* #ifdef MP-WEIXIN */
.left-side-button {
  /* 微信小程序中可能需要调整的样式 */
  right: 10rpx;
  z-index: 200;
}

/* 微信小程序中关闭某些在小程序中不支持的动画效果 */
.layers-panel.collapsed {
  transform: none;
  display: none;
}

/* 调整触摸反馈 */
.toggle-button {
  -webkit-tap-highlight-color: transparent;
}
/* #endif */

/* 滚动条样式优化 */
.layers-panel::-webkit-scrollbar {
  width: 6px;
}

.layers-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.layers-panel::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.layers-panel::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* 增加对其他滚动条的兼容性 */
.layers-panel {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

.panel-section {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.section-header {
  margin-bottom: 12px;
}

.section-title {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #1989fa;
  display: inline-block;
  text-align: left;
}

/* 自定义复选框样式 */
.custom-checkbox {
  margin-bottom: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  text-align: left;
}

.custom-checkbox:active {
  background-color: #f5f5f5;
}

/* 图层按钮样式 */
.layer-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}


  .custom-clear-button {
    width: 100%;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
    text-align: center;
  }

.custom-clear-button:hover {
  background: linear-gradient(135deg, #ff7875, #ff4d4f);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
}

.custom-clear-button:active {
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
}

.clear-icon {
  margin-right: 4px;
}

/* 滚动条样式 */
.layers-panel::-webkit-scrollbar {
  width: 6px;
}

.layers-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.layers-panel::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.layers-panel::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
</style>